<template>
  <div class="content-two mt-15px">
    <el-table :stripe="true" :data="twoInfo" style="width: 100%"  :expand-row-keys="expandedRows"
      row-key="numberInCatalog">
      <el-table-column type="expand">
        <template #default="props">
          <div style="background: #fafafa" class="flex p-20px">
            <div class="flex-1 pl-40px">
              <div style="height:30px;line-height: 30px;" v-for="value in props.row.componentsInCatalog" :key="value.id">{{ value.componentName }}</div>
            </div>
            <div class="flex-1 pl-30px">
                <div style="height:30px;line-height: 30px;" v-for="value in props.row.componentsNotInCatalog" :key="value.id">{{ value.componentName }}</div>

              </div>






          </div>
        </template>
      </el-table-column>
      <el-table-column prop="numberInCatalog" label="符合优选目录数量">
      </el-table-column>
      <el-table-column prop="numberNotInCatalog" label="不符合优选目录数量">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";
onMounted(() => {});

const props = defineProps({
  twoInfo: {
    type: Array,
    default: () => [],
  },
});
const twoInfo = ref([]);
const expandedRows = ref([]);
watch(
  () => props.twoInfo,
  (newVal) => {
    twoInfo.value = newVal;
    console.log(newVal,890);

    // 如果数据存在且只有一条，默认展开
    if (newVal && newVal.length === 1) {
      // 假设数据有 id 字段，如果没有可以用索引或其他唯一标识
      expandedRows.value = [newVal[0].numberInCatalog || 0];
    }
  },
   { immediate: true, deep: true }
);
</script>

<style scoped lang="less"></style>
